<template>
	<div class="container">
		<!-- 面包屑导航栏 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>胖虎家政</el-breadcrumb-item>
			<el-breadcrumb-item>家政服务</el-breadcrumb-item>
		</el-breadcrumb>
		
		<!-- 模糊搜索框 -->
		<el-row>
			<!-- form表单行内表单 -->
			<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
				<el-form-item label="状态:">
					 <el-radio-group v-model="radio1" @change="Select">
					      <el-radio-button label="all">全部商品</el-radio-button>
					      <el-radio-button label="up">上架中</el-radio-button>
					      <el-radio-button label="down">下架中</el-radio-button>
					    </el-radio-group>
				</el-form-item>
				<el-form-item label="服务名字:">
					<el-input v-model="queryInfo.communityName" placeholder="请输入服务名字"></el-input>
				</el-form-item>
				<el-form-item label="添加时间:">
					<div class="block">
						<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
					</div>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getList">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<el-button type="primary" @click="add">添加服务</el-button>
		
		
		<!-- 表格内容 -->
		<el-table :data="list" border style="width: 100%;margin-top: 20px; align: center;"  
		          :header-cell-style="{backgroundColor:'#eee'}" show-overflow-tooltip>  
		  <el-table-column prop="domesticServiceId" label="服务ID" width="180" align="center"></el-table-column>  
		  <el-table-column prop="domesticServiceName" label="服务名字" align="center"></el-table-column>  
		  <el-table-column prop="domesticServiceImage" label="服务照片" width="180" align="center">  
		    <!-- 这里可能需要一个自定义的插槽来显示图片，因为prop通常用于文本数据 -->  
		    <template slot-scope="scope">  
		      <img :src="scope.row.domesticServiceImage" style="display: block; margin: auto; width: 100%;">  
		    </template>  
		  </el-table-column>  
		  <el-table-column prop="salesVolume" label="销量" align="center"></el-table-column>  
		  <el-table-column prop="virtualSales" label="虚拟销量" align="center"></el-table-column>  
		  <el-table-column prop="addTime" label="添加时间" align="center"></el-table-column>  
		  
		  <el-table-column prop="domesticServiceStatus" label="状态" align="center">  
		    <template slot-scope="scope">  
		      <span style="padding: 5px 10px; color: #13CE66; background-color: #E7FAF0;"  
		            v-if="scope.row.domesticServiceStatus === 1">上架</span>  
		      <span style="padding: 5px 10px; color: #FF4949; background-color: #FFEDED;"  
		            v-else>下架</span>  
		      <!-- 注意：这里移除了textAlign属性，因为它不适用于<span> -->  
		    </template>  
		  </el-table-column>  
		  <el-table-column label="操作">  
		    <template slot-scope="scope">  
		      <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>  
		      <el-button type="text" @click="upORdown(scope.row)">  
		        {{ scope.row.domesticServiceStatus === 1 ? '立即下架' : '立即上架' }}  
		      </el-button>  
		    </template>  
		  </el-table-column>  
		</el-table>
		<!-- 分页 -->
		<el-row>
			<div class="block">
				<el-pagination :current-page="queryInfo.pageNum" :page-sizes="[10, 20, 30, 40]"
					:page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
					:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
		
				</el-pagination>
			</div>
		</el-row>
		
		
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				queryInfo:{
					pageNum: 1,
					pageSize: 10,
					domesticName: '',
					domesticStatus:'' ,
					startTime: '',
					endTime: '',
				},
				total: 0, // 总数据条数
				// 使用数组来保存日期范围，仅用于内部状态同步
				date: '',
				list: [],
				domesticServiceStatus:1,
				
				
			}
		},
		methods:{
			// 处理每页条数变化
			handleSizeChange(val) {
				this.queryInfo.pageSize = val;
				this.getList(this.queryInfo.pageNum, val);
			},
			// 处理当前页码变化  
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val;
				this.getList(val, this.queryInfo.pageSize);
			},
			getList(pageNum = 1,pageSize = 10){
				this.$http.get('domestic/querySearchDomesticServiceList',{
					params:this.queryInfo
				})
				.then((res)=>{
					if(res.status == 200){
						console.log(res);
						this.list = res.data.data.list
						this.total = res.data.data.total
					}
				})
			},
			//	切换上下架
			upORdown(row) {
				row.domesticServiceStatus = row.domesticServiceStatus === 1 ? 0 : 1
			},
			
		},
		mounted(){
			this.getList();
		}
	}
</script>

<style>
</style>